import React from 'react'
import { getRoleApi } from '../../../apis/role';
import { addUserApi,UpdateUserApi } from '../../../apis/user';
import { Button, Drawer,Form, Input,Tooltip,message,Select,TreeSelect, Radio} from 'antd';
export default function DrawerInfo(props?: any) {
    const { open, setOpen, userData, title, isUpdate, deptData,getData } = props
    //角色数据
    const [roleData, setRoleData] = React.useState([])
    //表单输入的数据
    const [userInput, setUserInput] = React.useState({})
    //关闭抽屉
    const onClose = () => {
        setOpen(false);
    };
    //取消新增，编辑
    function cancel() {
        setOpen(false)
    }
    React.useEffect(() => {
        //获取角色
        getRoleApi().then(res => {
            setRoleData(res.rows)
        })
         
    }, [])
    //记录表单输入的内容
    function onFormChange(_:any,value:any) {
        if (value.roleId) {
            //处理角色数组，转成字符串
            console.log(value,'value')
            setUserInput({...value,roleId:value.roleId.join()})
        } else {
            setUserInput(value)
        }
    }
    //确认新增
    function confirmAdd() {
        //处理密码，发送密码初始值
        addUserApi({ ...userInput, 'password': '1234qwer' }).then(res => {
                message.success('添加成功')
                setOpen(close)
                getData()
        })
    }
    //确认修改
    function confirmUpdate() {
        if (JSON.stringify(userInput) == "{}") {
            message.error('数据未发生变化')
        } else {
            UpdateUserApi({...userInput,userId:userData.userId}).then(res => {
                message.success('修改成功')
                setOpen(false)
                getData()
            })
            console.log(userInput)
         }
    }
    return (
        <>
            <Drawer title={title} placement="right" onClose={onClose} open={open} width="650px"
                //抽屉关闭后销毁里面的数据
                destroyOnClose={true}
                footer={
                    <>
                        {isUpdate ? <Button onClick={confirmUpdate}>确认编辑</Button> : <Button onClick={confirmAdd}>确认新增</Button>}
                        <Button onClick={cancel}>取消</Button>
                    </>
              }
            >
                <Form
                    autoComplete="off"
                    //当表单值发生变化的时候触发的回调函数
                    onValuesChange={onFormChange} 
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        //字段默认值。接收编辑用户的默认值
                        initialValue={userData.username}
                        rules={[{ required: true, message: '用户名不能为空' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                    >
                        <Tooltip title="新用户默认密码为1234qwer">
                            <Input.Password  readOnly defaultValue={'1234qwer'}/>
                         </Tooltip>
                        
                    </Form.Item>
                    <Form.Item
                        label="邮箱"
                        initialValue={userData.email}
                        name={'email'}
                       
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name={'mobile'}
                        initialValue={userData.mobile}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name={'roleId'}
                        initialValue={userData.roleId}
                    >
                        <Select
                            mode='tags'
                            options={roleData}
                            fieldNames={{label:'roleName',value:'roleId'}}
                        />
                    </Form.Item>
                    <Form.Item
                        label="部门"
                        name={'deptId'}
                        initialValue={userData.deptId}
                    >
                     <TreeSelect
                        treeData={deptData}
                        allowClear
                        
                    />
                    </Form.Item>
                    <Form.Item label='状态' name={'status'}
                    initialValue={userData.status}
                    >
                    <Radio.Group>
                       <Radio value={'0'}>锁定</Radio>     
                       <Radio value={'1'}>有效</Radio>     
                    </Radio.Group>
                    </Form.Item>
                    <Form.Item label='性别' name={'ssex'}
                    initialValue={userData.ssex}
                    >
                    <Radio.Group>
                       <Radio value={'0'}>男</Radio>     
                       <Radio value={'1'}>女</Radio>     
                       <Radio value={'2'}>保密</Radio>     
                    </Radio.Group>
                    </Form.Item>
                </Form>
            </Drawer>
        </>
    )
}
